<%@ page contentType="text/html;charset=UTF-8" language="java" %>

<html>
    <head>
        <title>EL内置对象</title>
        <style>
            .wrapper {
                border: 1px solid blue;
                margin: 15px auto;
            }
            h3 {
                text-align: center;
            }
            .container {
                display: flex;
                justify-content: space-between;
                border: 1px solid green;
                margin: 10px;
            }
            aside.item {
                flex-basis: 18%;
                text-align: right;
            }
            main.item {
                flex-basis: 80%;
            }
        </style>
    </head>
    <body>

        <h3>EL内置对象(Implicit Objects)</h3>

        <div class="wrapper">
            <div class="container">
                <aside class="item">
                    名称
                </aside>
                <main class="item">
                    对象
                </main>
            </div>
            <div class="container">
                <aside class="item">
                    pageContext:
                </aside>
                <main class="item">
                    ${ pageContext }
                </main>
            </div>
            <div class="container">
                <aside class="item">
                    pageScope:
                </aside>
                <main class="item">
                    ${ pageScope }
                </main>
            </div>
            <div class="container">
                <aside class="item">
                    requestScope:
                </aside>
                <main class="item">
                    ${ requestScope }
                </main>
            </div>
            <div class="container">
                <aside class="item">
                    sessionScope:
                </aside>
                <main class="item">
                    ${ sessionScope }
                </main>
            </div>
            <div class="container">
                <aside class="item">
                    applicationScope:
                </aside>
                <main class="item">
                    ${ applicationScope }
                </main>
            </div>
            <div class="container">
                <aside class="item">
                    param:
                </aside>
                <main class="item">
                    ${ param }
                </main>
            </div>
            <div class="container">
                <aside class="item">
                    paramValues:
                </aside>
                <main class="item">
                    ${ paramValues }
                </main>
            </div>
            <div class="container">
                <aside class="item">
                    header:
                </aside>
                <main class="item">
                    ${ header }
                </main>
            </div>
            <div class="container">
                <aside class="item">
                    headerValues:
                </aside>
                <main class="item">
                    ${ headerValues }
                </main>
            </div>
            <div class="container">
                <aside class="item">
                    cookie:
                </aside>
                <main class="item">
                    ${ cookie }
                </main>
            </div>
            <div class="container">
                <aside class="item">
                    initParam:
                </aside>
                <main class="item">
                    ${ initParam }
                </main>
            </div>
        </div>

    </body>
</html>
